<html>
	<head>
		<title></title>
		<script src="../jquery1.4.2.js" type="text/javascript"></script>
		<script src="jquery.DynamicTable.js" type="text/javascript"></script>
		<script type="text/javascript">
        var rowtmplate = "<tr><td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
        rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
        rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
        rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
        rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
        rowtmplate += "<td class='TableData'><a href='#' >删除</a></td></tr>";

        $(document).ready(function() {
            $(this).bind('keyup', function(e) {
                switch (e.keyCode) {
                    case 38:    //上  ↑
                        var arr = $.fn.getFocus();
                        var rowIndex = arr[0] - 1;
                        $.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] });
                        $.fn.setCellsFocus();
                        break;
                    case 40:    //下   ↓
                        var arr = $.fn.getFocus();
                        var rowIndex = arr[0] + 1;
                        $.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] });
                        $.fn.setCellsFocus();
                        break;
                    default:
                        break;

                }
            });
            $('#mytbl').DynamicTable({
                rowCount: 3, //添加行数
                identity: 1, //第1列自动编号
                arrFocus: [2, 1], //第一个单元格设置为焦点
                rowTmplate: rowtmplate //行模版
            });

            $('#mytbl').BindEvent({
                eventName: "click",
                colIndex: 1,
                fn: alertMsg
            }); //默认给第一列绑定click事件
            $('#mytbl').setCellsFocus(); //设置第一个单元格为焦点
            $('#mytbl').deleteRow(); //默认给第6列绑定删除事件
            $('#mytbl').AutoFillData({ colIndex: 2, fn: getData }); //默认给第二列绑定自动填充数据
            $('#mytbl').Identity({ colIndex: 1 });  //默认给第一列自动排序
            $('#mytbl').validationText({ reg: /^((\d+\.\d{2})|\d+)$/, colIndex: 5, defalutValue: 0.00 }); //默认给第二列添加验证(只能输入money格式)
        });
        //添加行
        function addRow(count) {
            $('#mytbl').addRow({ rowCount: count });
            $('#mytbl').Identity();
            $.fn.deleteRow();
        }
        
        //获取自动填充数据
        function getData(key) {
            var arr = [];
            arrFoucs = $.fn.getFocus();
            
            $.ajax({
                type: "post",
                async: false, //控制同步
                url: "getData.ashx",
                dataType: "json",
                cache: false,
                success: function(data) {
                    var idx = arrFoucs[0] - 2;
                    arr.push(data[idx].id);
                    arr.push(data[idx].Name);
                    arr.push(data[idx].Code);
                    arr.push(data[idx].Units);
                    arr.push(data[idx].Price);
                },
                Error: function(err) {
                    alert(err);
                }
            });
            $.fn.setCellsFocus({ rowIndex: arrFoucs[0], colIndex: 4 });
            return arr;
        }
        function alertMsg() {
            arrFoucs = $.fn.getFocus();
            alert('你单击了坐标X：'+arrFoucs[0]+' Y：'+arrFoucs[1]+'的单元格');
        }
    </script>
	</head>
	<body>
		<form id="form1">
			<div>
				<table cellpadding="0" cellspacing="0" class="tablestyle1"
					id="mytbl">
					<tr>
						<td class="TableData">
							序号
						</td>
						<td class="TableData">
							产品名称
						</td>
						<td class="TableData">
							产品代码
						</td>
						<td class="TableData">
							单位
						</td>
						<td class="TableData">
							单价
						</td>
						<td class="TableData">
							<a href="#" onclick="addRow(5);">添加5行</a>
						</td>
					</tr>
				</table>

				<input type="button" value="获取值" onclick="javascript:alert($.fn.getValue({}));" />
			</div>
		</form>
	</body>
</html>
